<template>
  <div class="flex flex-col justify-between h-full pb-4">
    <div v-if="isMac()" class="mac-titlebar"></div>

    <van-nav-bar
      v-if="isMac() || isElectron()"
      title="创建"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="flex flex-col flex-auto px-2">
      <div class="mb-4" v-for="field in combinedFields" :key="field.id">
        <div class="flex flex-col items-start" v-if="field.fieldType === 'String'">
          <van-field
            v-model="customerInfo[field.fieldName]"
            :placeholder="field.placeholder"
            :required="field.isRequired === 1"
            :maxlength="field.maxLength"
            :label="field.fieldName"
            :minlength="field.minLength"
            clearable
          />
        </div>
        <div v-else-if="field.fieldType === 'Select'">
          <van-field
            v-model="customerInfo[field.fieldName]"
            :label="field.fieldName"
            :placeholder="field.placeholder"
            :required="field.isRequired === 1"
            is-link
            readonly
            @click="showSelect(field)"
          />
        </div>
      </div>
    </div>

    <!--  -->
    <van-button
      round
      block
      :disabled="!allRequiredFieldsFilled"
      @click="onClickConfirmCustomer"
      type="primary"
      class="button mt-6"
      >确定
    </van-button>

    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script setup>
import { showToast } from "vant";
import { ref, computed, onMounted } from "vue";
import { useOrderVisitStore } from "@/store";
import { useRouter } from "vue-router";
import { isMac, isElectron } from "@/utils/platformTool";

const store = useOrderVisitStore();
const router = useRouter();

const show = ref(false);
const actions = ref([]);
const customerInfo = ref({});
const currentField = ref({});
const nameField = ref({
  id: "name",
  fieldName: "姓名",
  fieldType: "String",
  placeholder: "请输入姓名",
  isRequired: 1,
  maxLength: 50,
  minLength: 1,
});

onMounted(() => {
  store.getOuterFiledPartnerAction();
});

function onClickLeft() {
  console.log("onClickLeft");
  router.back();
}

const outerFiledTemple = computed(() => {
  return store.outerFiledTemple;
});

const combinedFields = computed(() => {
  let array = outerFiledTemple.value.filter((field) => {
    return field.fieldStatus !== 0;
  });
  return [nameField.value, ...array];
});

function showSelect(field) {
  console.log("展示弹框: ", field);
  currentField.value = field;
  const options = JSON.parse(field.fieldOptions);
  actions.value = options.map((field) => {
    return {
      name: field,
    };
  });
  show.value = true;
}

function onSelect(action) {
  customerInfo.value[currentField.value.fieldName] = action.name;
  console.log(action);
}

const loading = ref(false);
async function onClickConfirmCustomer() {
  const parameter = {};
  const fieldValues = [];
  combinedFields.value.forEach((field) => {
    fieldValues.push({
      id: field.id,
      fieldId: field.id,
      fieldName: field.fieldName,
      fieldValue: customerInfo.value[field.fieldName],
    });
  });
  parameter.name = customerInfo.value.姓名;
  parameter.fieldValues = fieldValues;
  parameter.attendeeType = "CUSTOMER_ATTENDEE";

  console.log("parameter", parameter);

  loading.value = true;
  await store.createCustomerAttendAction(parameter);
  loading.value = false;
  router.back();
}

const allRequiredFieldsFilled = computed(() => {
  return outerFiledTemple.value.every((field) => {
    return field.isRequired !== 1 || customerInfo.value[field.fieldName];
  });
});
</script>

<style lang="less" scoped></style>
